<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="./img/husky_tran.png" type="image/x-icon"/>
    <meta name="referrer" content="no-referrer"/>
    <title>HuskyMovie</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css">

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">
    <!-- Bootstrap core CSS -->
    <link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .button {
            --color: #F6F8FF;
            --color-hover: #F6F8FF;
            --color-active: #fff;
            --icon: #E1E6F9;
            --icon-hover: #ECEFFC;
            --icon-active: #fff;
            --background: #404660;
            --background-hover: #393E57;
            --background-active: #275EFE;
            --shadow: rgba(0, 17, 119, 0.1);
            display: inline-block;

            outline: none;
            cursor: pointer;
            position: relative;
            border: 0;
            background: none;
            padding: 8px 12px 8px 22px;
            border-radius: 9px 0 0 9px;
            line-height: 27px;
            font-family: inherit;
            font-weight: 600;
            font-size: 14px;
            color: var(--color);
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s linear;
            -webkit-clip-path: inset(0px 4px 0px 0px);
        }

        .button:hover {
            --icon: var(--icon-hover);
            --color: var(--color-hover);
            --background: var(--background-hover);
        }

        .button:active {
            --scale: .95;
        }

        .button:not(.liked):hover {
            --hand-rotate: 8deg;
            --hand-thumb-1: -12deg;
            --hand-thumb-2: 36deg;
        }

        .button.liked {
            --span-x: 2px;
            --span-d-o: 1;
            --span-d-x: 0;
            --icon: var(--icon-active);
            --color: var(--color-active);
            --background: var(--background-active);
            --hand-name: hand;
        }

        .button:after {
            content: "";
            min-width: 10px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: inherit;
            transition: background 0.2s linear, transform 0.2s, box-shadow 0.2s linear;
            transform: scale(var(--scale, 1)) translateZ(0);
            background: var(--background);
            box-shadow: 0 4px 8px var(--shadow), 0 8px 20px var(--shadow);
        }

        .button .emitter {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateZ(-4px);
        }

        .button .emitter div {
            width: 6px;
            height: 6px;
            margin: -3px 0 0 -3px;
            border-radius: 2px;
            position: absolute;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            background: var(--b, none);
        }

        .button .hand {
            width: 11px;
            height: 11px;
            border-radius: 2px 0 0 0;
            background: var(--icon);
            margin: 10px 8px 0 0;
            transform-origin: -5px -1px;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-rotate, 0deg)) translateZ(0);
            -webkit-animation: var(--hand-name, none) 0.5s linear;
            animation: var(--hand-name, none) 0.5s linear;
        }

        .button .hand:before, .button .hand:after {
            content: "";
            background: var(--icon);
            position: absolute;
            transition: background 0.2s linear, box-shadow 0.2s linear;
        }

        .button .hand:before {
            left: -5px;
            bottom: 0;
            height: 12px;
            width: 4px;
            border-radius: 1px 1px 0 1px;
        }

        .button .hand:after {
            right: -3px;
            top: 0;
            width: 4px;
            height: 4px;
            border-radius: 0 2px 2px 0;
            background: var(--icon);
            box-shadow: -0.5px 4px 0 var(--icon), -1px 8px 0 var(--icon), -1.5px 12px 0 var(--icon);
            transform: scaleY(0.6825);
            transform-origin: 0 0;
        }

        .button .hand .thumb {
            background: var(--icon);
            width: 10px;
            height: 4px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            position: absolute;
            left: 0;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: scale(0.85) translateY(-0.5px) rotate(var(--hand-thumb-1, -45deg)) translateZ(0);
        }

        .button .hand .thumb:before {
            content: "";
            height: 4px;
            width: 7px;
            border-radius: 2px;
            transform-origin: 2px 2px;
            background: var(--icon);
            position: absolute;
            left: 7px;
            top: 0;
            transition: transform 0.25s, background 0.2s linear;
            transform: rotate(var(--hand-thumb-2, -45deg)) translateZ(0);
        }

        .button .hand,
        .button span {
            z-index: 1;
            position: relative;
            display: inline-block;
            vertical-align: top;
        }

        .button .hand span,
        .button span span {
            opacity: var(--span-d-o, 0);
            transition: transform 0.25s, opacity 0.2s linear;
            transform: translateX(var(--span-d-x, 4px)) translateZ(0);
        }

        .button > span {
            transition: transform 0.25s;
            transform: translateX(var(--span-x, 4px)) translateZ(0);
        }

        @-webkit-keyframes hand {
            30% {
                transform: rotate(-14deg) translateZ(0);
            }
            65% {
                transform: rotate(7deg) translateZ(0);
            }
            100% {
                transform: rotate(0deg) translateZ(0);
            }
        }

        @keyframes hand {
            30% {
                transform: rotate(-14deg) translateZ(0);
            }
            65% {
                transform: rotate(7deg) translateZ(0);
            }
            100% {
                transform: rotate(0deg) translateZ(0);
            }
        }


        html {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        * {
            box-sizing: inherit;
        }

        *:before, *:after {
            box-sizing: inherit;
        }

        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .background {
            width: 100%;
            margin-top: -100px;
            z-index: 0;
        }

        .title {
            /*background: greenyellow;*/
            /*background-image: url("");*/
            background-size: cover;
        }

        body {
            background-color: #171717;
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
            /*background: hsla(0, 0%, 15%, .6);*/
            /*-webkit-backdrop-filter: blur(5px);*/
            /*backdrop-filter: blur(100px);*/
            /*border-radius: 2rem;*/
        }


        section {
            background-color: black;
        }

        .gray {
            background-color: #141414;
        }

        .title_top {
            text-shadow: #000 2px 2px 6px;
            margin-top: 50px;
            color: white;
        }

        .title_top_text {
            margin-top: 150px;
        }

        .left_maker {
            float: left;
            width: 200px;
            margin-left: 15%;
        }

        .father .child {
            display: none;


        }

        .father:hover .child {
            display: block;
        }

        .fixed {
            /*width: 40px;*/
            /*height: 100%;*/
            width: 100%;
            float: top;
            position: fixed; /*滚动时可以固定在屏幕上*/
            top: 0;
            /*right: 0;*/
            /*background: rgb(38,38,38);*/
            z-index: 0; /*在前100层上浮动*/
        }

        .top {
            z-index: 1;
            /*position: relative;*/
        }

        .footer {
            z-index: 1;
        }

        .top2 {
            z-index: 2;
            position: relative;
            /*margin-top: 200px;*/
            margin-left: 10%;
            margin-right: 10%;
            -webkit-transform: translate(50px, 100px);
            -moz-transform: translate(50px, 100px);
            transform: translate(0px, -300px);
            clip: rect(0, auto, 200px, 0);

            /*margin-top: 200px;*/
        }


        .trans {
            background: hsla(0, 0%, 9%, .4);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(100px);
        }

        .cover {
            /*background-color: #222529;*/
            z-index: 2;
            position: relative;
            background-color: #24282b;
            /*box-shadow: 0 0 200px 200px #24282b;*/
            /*后面三行解除注释，就实现毛玻璃效果，上面一行解注释，实现实心底色效果*/
            background: hsla(0, 0%, 9%, .6);
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(100px);
            border-radius: 2rem;
            /*box-shadow: inset 0 0 100px 100px #000000;*/
            /*-webkit-filter: blur(20px);*/
            /*-moz-filter: blur(20px);*/
            /*-ms-filter: blur(20px);*/
            /*-o-filter: blur(20px);*/
            /*filter: blur(20px);*/
        }

        .front {
            position: relative;
            z-index: 2;
            /*margin-top: -50px;*/
        }

        .aa {
            transition: all 2s;
        }

        .go {
            transform: rotate(-180deg);
            transition: all 2s;
        }

        svg.fa-refresh {
            margin: 4px 0 0 5px;
            padding: 5px;
            font-size: 18px;
            color: white;
            cursor: pointer;
            transform-origin: center center;
            transition: transform 0.2s ease-out, color 0.2s ease-out;

        }

        svg.fa-refresh:hover {
            color: #59dc39;
            transform: rotate(180deg);
        }

        .loading {

            position: absolute;
            margin-top: -400px;
            z-index: 101;
            background-color: #FFF;

            width: 100%;
            height: 100%;
            display: fixed;
        }

        .loading img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100%);


            /*transform:translate(-50%,-50%);*/
            /*margin: 0 auto;*/
            /*align: center;*/
            /*margin-top: 200px;*/
            /*margin-left: 35vw;*/
            display: block;
            min-height: 200px;
            min-width: 200px;
        }


        .loading div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, 200%);
            /*margin-left: 40vw;*/
            /*margin-top: 50px;*/
            font-size: large;
            color: #5f4d43;
        }

    </style>


</head>
<body>
<div id="box">
    <header>
        <div class="front collapse bg-dark" id="navbarHeader" style="margin-top: 50px">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-md-7 py-4">
                        <h4 class="text-white">关于HuskyMovie</h4>
                        <p class="text-muted">这是一个简洁且丰富的电影推荐系统，HuskyMovie最懂你。</p>
                    </div>
                    <div class="col-sm-4 offset-md-1 py-4" v-if="isLogin">
                        <h4 class="text-white ">{{ userName }}</h4>
                        <ul class="list-unstyled">
                            <!--                            <li><a href="#" class="text-white">详情</a></li>-->
                            <li><a href="#" class="text-white" @click="logout()">注销</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4 offset-md-1 py-4" v-else>
                        <h4 class="text-white">欢迎</h4>
                        <ul class="list-unstyled">
                            <li><a href="login.html" class="text-white">登录</a></li>
                            <li><a href="register.html" class="text-white">注册</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--        检查点1-->
        <div class="trans navbar navbar-dark shadow-sm fixed-top">
            <div class="container">
                <a href="#" class="navbar-brand d-flex align-items-center">
                    <img width="40px" src="./img/husky_tran.png" alt="logo"/>
                    <strong style="margin-left: 10px">HuskyMovie</strong>
                </a>
                <a href="search.html" class="navbar-brand d-flex align-items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor"
                         class="bi bi-search" viewBox="0 0 16 16">-->
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                    </svg>
                    <strong style="margin-left: 10px">Search</strong>
                </a>


                <!--                <button class="navbar-toggler" type="button" data-bs-toggle="" data-bs-target="" style="margin-left: 40vw">-->
                <!--                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">-->
                <!--                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>-->
                <!--                    </svg>-->
                <!--                </button>-->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader"
                        aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>
    </header>

    <main>
        <div class="loading" v-if="load_stat">
            <img src="./img/loading.gif" alt="Loading">
            <div>Loading...</div>
        </div>
        <section id="title" class="title fixed py-5" style="margin-top: 20px">
            <!--            <img class="background" src="http://pic.rofc.online/2021.07.20-21:26:06.jpg">-->
            <div class="row py-lg-5">

                <div class="col-lg-6 col-md-8" style="margin-left: 10%">
                    <!--            <div class="col-lg-6 col-md-8 mx-auto">-->
                    <h1 class="title_top" @click="titleclick">{{ titleName }}</h1>
                    <a @click="playToDetail" class="btn btn-primary my-2">
                        <!--                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"-->
                        <!--                             class="bi bi-play-fill" viewBox="0 0 16 16">-->
                        <!--                            <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>-->
                        <!--                        </svg>-->
                        🔍详情</a>
                    <!--                    <a href="#" class="btn btn-light my-2">-->
                    <!--                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"-->
                    <!--                             class="bi bi-info-circle-fill" viewBox="0 0 16 16">-->
                    <!--                            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>-->
                    <!--                        </svg>-->
                    <!--                        Info</a>-->
                    </p>
                    <div class="title_top_text"></div>
                </div>

            </div>
        </section>

        <div class="album py-5 bg-black top" style="margin-top: 28rem">
            <!--            <div class="container">-->
            <div class="">
                <div class="cover">

                    <div style="color: white;margin-bottom: 40px;margin-top: 230px;font-size: large;font-weight: bold;text-shadow: #000 2px 2px 6px;"
                         class="top2">{{ forYou_name }}
                        <svg @click="refreshList" style="margin-bottom: 5px;margin-left: -5px"
                             class="fa-refresh bi bi-arrow-repeat"
                             xmlns="http://www.w3.org/2000/svg" width="40" height=40" fill="currentColor"
                             viewBox="0 0 16 16">
                            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
                            <path fill-rule="evenodd"
                                  d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
                        </svg>
                        <!--                        <svg style="margin-bottom: 5px" xmlns="http://www.w3.org/2000/svg" width="25" height="25"-->
                        <!--                             fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">-->
                        <!--                            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>-->
                        <!--                            <path fill-rule="evenodd"-->
                        <!--                                  d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>-->
                        <!--                        </svg>-->
                        <div class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-6 g-3">

                            <div class="col" v-for="items in forYou" :key="items.id">

                                <div class="father gray card shadow-sm">
                                    <!--                            <img width="100%" src="./img/p1.png" />-->
                                    <img width="100%" :src="items.cover_url" referrerPolicy="no-referrer"
                                         class="rounded"
                                         alt="cover"
                                         @click="getdetail(items)">
                                    <!--                                        <button class="button"-->
                                    <!--                                                @click="buttonclick_up($event,items)">-->
                                    <!--                                            <div class="emitter"></div>-->
                                    <!--                                            <div class="hand">-->
                                    <!--                                                <div class="thumb"></div>-->
                                    <!--                                            </div>-->
                                    <!--                                        </button>-->

                                    <!--                                        <button class="button"-->
                                    <!--                                                @click="buttonclick_down($event,items)"-->
                                    <!--                                                style="transform: rotate(180deg);margin-left: -15px">-->
                                    <!--                                            <div class="emitter"></div>-->
                                    <!--                                            <div class="hand">-->
                                    <!--                                                <div class="thumb"></div>-->
                                    <!--                                            </div>-->
                                    <!--                                        </button>-->
                                    <!--                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"-->
                                    <!--                             xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"-->
                                    <!--                             preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>-->
                                    <!--                            <rect width="100%" height="100%" fill="#55595c"/>-->
                                    <!--                            &lt;!&ndash;                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>&ndash;&gt;-->
                                    <!--                        </svg>-->
                                    <div class="card-body">
                                        <!--                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to-->
                                        <!--                                additional content. This content is a little bit longer.</p>-->
                                        <div class="d-flex flex-column justify-content-between align-items-center">
                                            <div style="color: #ffffff;margin-top: 0;margin-bottom: 10px;font-size: large"
                                                 class="fw-normal">{{ items.title }}
                                            </div>
                                            <div class="btn-group btn-group-sm" style="z-index: 100">
                                                <button id="button_3" class="button"
                                                        @click="buttonclick_up($event,items)" style="z-index: 100">
                                                    <div class="emitter"></div>
                                                    <div class="hand">
                                                        <div class="thumb"></div>
                                                    </div>
                                                </button>

                                                <button id="button_4" class="button"
                                                        @click="buttonclick_down($event,items)"
                                                        style="transform: rotate(180deg);margin-left: -10px;z-index: 100">
                                                    <div class="emitter"></div>
                                                    <div class="hand">
                                                        <div class="thumb"></div>
                                                    </div>
                                                </button>
                                                <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_up(items)">👍-->
                                                <!--                                                </button>-->
                                                <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_down(items)">👎-->
                                                <!--                                                </button>-->
                                            </div>
                                            <!--                                <small class="text-muted">9 mins</small>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div style="color: white;margin-bottom: 40px;font-size: large;font-weight: bold;text-shadow: #000 2px 2px 6px;"
                         v-for="item in movie_list" :key="item.id"
                         :value="item.value"
                         :label="item.label" class="top2">{{ item.categoryName }}
                        <svg @click="refreshList" style="margin-bottom: 5px;margin-left: -5px;"
                             class="fa-refresh bi bi-arrow-repeat" xmlns="http://www.w3.org/2000/svg" width="40"
                             height=40" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
                            <path fill-rule="evenodd"
                                  d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
                        </svg>
                        <div class="row row-cols-2 row-cols-sm-3 row-cols-md-3 row-cols-lg-6 g-3">

                            <div class="col" v-for="array in item.movies" :key="array.id" :value="item.value"
                                 :label="item.label">

                                <div class="father gray card shadow-sm">
                                    <!--                            <img width="100%" src="./img/p1.png" />-->
                                    <img width="100%" :src="array.cover_url" referrerPolicy="no-referrer"
                                         class="rounded"
                                         @click="getdetail(array)">
                                    <!--                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"-->
                                    <!--                             xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"-->
                                    <!--                             preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>-->
                                    <!--                            <rect width="100%" height="100%" fill="#55595c"/>-->
                                    <!--                            &lt;!&ndash;                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>&ndash;&gt;-->
                                    <!--                        </svg>-->
                                    <div class="card-body">
                                        <!--                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to-->
                                        <!--                                additional content. This content is a little bit longer.</p>-->
                                        <div class="d-flex flex-column justify-content-between align-items-center">
                                            <div style="color: #ffffff;margin-top: 0;margin-bottom: 10px;font-size: large"
                                                 class="fw-normal">{{ array.title }}
                                            </div>
                                            <div class="btn-group btn-group-sm">
                                                <button class="button" @click="buttonclick_up($event,array)">
                                                    <div class="emitter"></div>
                                                    <div class="hand">
                                                        <div class="thumb"></div>
                                                    </div>
                                                </button>

                                                <button class="button" @click="buttonclick_down($event,array)"
                                                        style="transform: rotate(180deg);margin-left: -10px">
                                                    <div class="emitter"></div>
                                                    <div class="hand">
                                                        <div class="thumb"></div>
                                                    </div>
                                                </button>
                                                <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_up(array)">👍-->
                                                <!--                                                </button>-->
                                                <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_down(array)">👎-->
                                                <!--                                                </button>-->
                                            </div>
                                            <!--                                <small class="text-muted">9 mins</small>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div style="color: white;margin-bottom: 40px;font-size: large;font-weight: bold;text-shadow: #000 2px 2px 6px;"
                         class="top2" v-if="age_recm_exist">您可能喜欢这个年代的电影
                        <svg @click="refreshList" style="margin-bottom: 5px;margin-left: -5px"
                             class="fa-refresh bi bi-arrow-repeat"
                             xmlns="http://www.w3.org/2000/svg" width="40" height=40" fill="currentColor"
                             viewBox="0 0 16 16">
                            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
                            <path fill-rule="evenodd"
                                  d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
                        </svg>
                        <!--                        <svg style="margin-bottom: 5px" xmlns="http://www.w3.org/2000/svg" width="25" height="25"-->
                        <!--                             fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">-->
                        <!--                            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>-->
                        <!--                            <path fill-rule="evenodd"-->
                        <!--                                  d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>-->
                        <!--                        </svg>-->
                        <div class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-6 g-3">

                            <div class="col" v-for="items in movie_age" :key="items.id">

                                <div class="father gray card shadow-sm">
                                    <!--                            <img width="100%" src="./img/p1.png" />-->
                                    <img width="100%" :src="items.cover_url" referrerPolicy="no-referrer"
                                         class="rounded"
                                         alt="cover"
                                         @click="getdetail(items)">
                                    <!--                                        <button class="button"-->
                                    <!--                                                @click="buttonclick_up($event,items)">-->
                                    <!--                                            <div class="emitter"></div>-->
                                    <!--                                            <div class="hand">-->
                                    <!--                                                <div class="thumb"></div>-->
                                    <!--                                            </div>-->
                                    <!--                                        </button>-->

                                    <!--                                        <button class="button"-->
                                    <!--                                                @click="buttonclick_down($event,items)"-->
                                    <!--                                                style="transform: rotate(180deg);margin-left: -15px">-->
                                    <!--                                            <div class="emitter"></div>-->
                                    <!--                                            <div class="hand">-->
                                    <!--                                                <div class="thumb"></div>-->
                                    <!--                                            </div>-->
                                    <!--                                        </button>-->
                                    <!--                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"-->
                                    <!--                             xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"-->
                                    <!--                             preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>-->
                                    <!--                            <rect width="100%" height="100%" fill="#55595c"/>-->
                                    <!--                            &lt;!&ndash;                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>&ndash;&gt;-->
                                    <!--                        </svg>-->
                                    <div class="card-body">
                                        <!--                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to-->
                                        <!--                                additional content. This content is a little bit longer.</p>-->
                                        <div class="d-flex flex-column justify-content-between align-items-center">
                                            <div style="color: #ffffff;margin-top: 0;margin-bottom: 10px;font-size: large"
                                                 class="fw-normal">{{ items.title }}
                                            </div>
                                            <div class="btn-group btn-group-sm">
                                                <button id="button_5" class="button"
                                                        @click="buttonclick_up($event,items)">
                                                    <div class="emitter"></div>
                                                    <div class="hand">
                                                        <div class="thumb"></div>
                                                    </div>
                                                </button>

                                                <button id="button_6" class="button"
                                                        @click="buttonclick_down($event,items)"
                                                        style="transform: rotate(180deg);margin-left: -10px">
                                                    <div class="emitter"></div>
                                                    <div class="hand">
                                                        <div class="thumb"></div>
                                                    </div>
                                                </button>
                                                <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_up(items)">👍-->
                                                <!--                                                </button>-->
                                                <!--                                                <button type="button" class="child btn btn-outline-secondary" @click="thumbs_down(items)">👎-->
                                                <!--                                                </button>-->
                                            </div>
                                            <!--                                <small class="text-muted">9 mins</small>-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </main>

</div>

<footer class="text-muted py-5 footer">
    <div class="container">
        <p class="float-end mb-1">
            <a href="footer.html">关于我们</a>
        </p>
        <p class="mb-1">HuskyMovie is a &copy; Bootstrap project.</p>

    </div>
</footer>


<script src="./assets/dist/js/bootstrap.bundle.min.js"></script>
<script>

    var position = 0;

    document.querySelectorAll(".button").forEach((button) => {
        button.addEventListener("click", (e) => {
            console.log("click")
            button.classList.toggle("liked");
            button.classList.toggle("liked");
            button.classList.toggle("liked");
            if (button.classList.contains("liked")) {
                setTimeout(() => {
                    // particles(
                    //     button.querySelector(".emitter"),
                    //     100,
                    //     0,
                    //     0,
                    //     360,
                    //     button.offsetWidth
                    // );
                }, 160);
            }
        });
    });
    // window.localStorage
    // let locals = localStorage.getItem('userdata');
    // userData = JSON.parse(locals);
    // console.log(userData.username);
    // console.log(userData.token);
    var vue = new Vue({
        el: "#box",
        data: {
            isLogin: 0, //是否登录，1为登录
            userName: 'HuskyUser', //缺省用户名
            userToken: '',
            position: 1,    //本页面的相对位置
            bkgPic: [],
            titleName: '', //首页大图电影名称
            load_stat: 1,
            forYou: [
                {
                    id: 166555,
                    img: 'https://img2.doubanio.com/view/photo/s_ratio_poster/public/p453924541.jpg',
                    name: 'A'
                },
                {
                    id: 287876,
                    img: 'https://img2.doubanio.com/view/photo/s_ratio_poster/public/p452089833.jpg',
                    name: 'B'
                }
            ],
            forYou_name: '',
            movie_list: [],
            movie_age: [],
            age_recm_exist: 0,
            // wait_time: 6000,
            items: [
                {
                    id: 2,
                    categoryName: 'Cartoon',
                    movies: [
                        {
                            id: 1,
                            img: 'https://img2.doubanio.com/view/photo/s_ratio_poster/public/p462657443.jpg',
                            name: 'A'
                        },
                        {
                            id: 2,
                            img: 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2560717825.jpg',
                            name: 'B'
                        },
                        {
                            id: 3,
                            img: 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1245102664.jpg',
                            name: 'C'
                        },
                        {
                            id: 1,
                            img: 'https://img2.doubanio.com/view/photo/s_ratio_poster/public/p462657443.jpg',
                            name: 'A'
                        },
                        {
                            id: 2,
                            img: 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2560717825.jpg',
                            name: 'B'
                        },
                        {
                            id: 3,
                            img: 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1245102664.jpg',
                            name: 'C'
                        }
                    ]
                },
                {
                    id: 2,
                    categoryName: 'Cartoon',
                    movies: [
                        {
                            id: 1,
                            img: 'https://img2.doubanio.com/view/photo/s_ratio_poster/public/p462657443.jpg',
                            name: 'A'
                        },
                        {
                            id: 2,
                            img: 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2560717825.jpg',
                            name: 'B'
                        },
                        {
                            id: 3,
                            img: 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1245102664.jpg',
                            name: 'C'
                        }
                    ]
                }
            ]
        },

        methods: {
            playToDetail() {
                localStorage.setItem('movieId', JSON.stringify(this.bkgPic.movie_id));
                window.location.href = "detail.html";
            },
            titleclick() {
                console.log("touch");
                var obj = document.getElementById("title");
                // obj.style.backgroundImage= url("http://pic.rofc.online/2021.07.20-21:25:57.jpg");
                titlepicture = "http://pic.rofc.online/2021.07.20-21:25:57.jpg";
                $("#title").css("background-image", "url(" + titlepicture + ")");
            },
            refreshList() {
                var user_movie = new FormData()
                user_movie.append('username', this.userName);
                user_movie.append('token', this.userToken);

                var host = 'http://124.70.36.92:19132/';
                var url = host + 'authorities/movielist/'

                axios({
                    method: 'POST',
                    url: url,
                    // url: 'http://124.70.36.92:19132/polls/login/',
                    dataType: 'json',
                    data: user_movie,
                }).then(res => {
                    if (res.data.msg === '非法访问') {
                        window.location.href = "login.html";
                    } else {
                        console.log(res.data.recommends);
                        this.movie_list = res.data.recommends.slice(1,);
                        this.forYou = res.data.recommends.slice(0, 1);
                        this.forYou_name = this.forYou[0].categoryName;
                        this.forYou = this.forYou[0].movies;
                        console.log('foryou:' + this.forYou);
                        console.log('ml:' + this.movie_list)
                        console.log('be:' + this.items)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            buttonclick_up(e, it) {
                console.log(e);
                e.currentTarget.nextElementSibling.classList.remove("liked");
                console.log(it);
                this.thumbs_up(it);
                // document.getElementById("myDIV")
                e.target.classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                // document.getElementById("likebtn").classList.toggle("liked");
                if (e.target.classList.contains("liked")) {
                    setTimeout(() => {
                        // particles(
                        //     button.querySelector(".emitter"),
                        //     100,
                        //     0,
                        //     0,
                        //     360,
                        //     button.offsetWidth
                        // );
                    }, 160);
                }
            },
            buttonclick_down(e, it) {
                console.log(e);
                e.currentTarget.previousElementSibling.classList.remove("liked");
                console.log(it);
                this.thumbs_down(it);
                // document.getElementById("myDIV")
                e.target.classList.toggle("liked");

                if (e.target.classList.contains("liked")) {
                    setTimeout(() => {
                        // particles(
                        //     button.querySelector(".emitter"),
                        //     100,
                        //     0,
                        //     0,
                        //     360,
                        //     button.offsetWidth
                        // );
                    }, 160);
                }
            },
            getdetail(e) {
                console.log(e);
                localStorage.setItem('movieId', JSON.stringify(e.id));
                localStorage.setItem('ref', 1);
                window.location.href = "detail.html";
            },
            add: function () {
                this.buyNum++
            },
            sub: function () {
                this.buyNum--
            },
            logout: function () {
                this.isLogin = 0;
                window.location.href = "index.html";
            },
            start() {
                this.rotate !== this.rotate;
                console.log(this.rotate)
            },
            thumbs_up(e) {
                console.log("调用了thumbs_up");
                console.log(e);
                let position = 2;
                let movie_id = e.id;

                console.log(this.userName);
                console.log(this.userToken);
                var thumbsUp = new FormData()
                thumbsUp.append('username', this.userName);
                thumbsUp.append('token', this.userToken);
                thumbsUp.append('movie_id', e.id);

                var host = 'http://124.70.36.92:19132/';
                var url = host + 'authorities/favor/'

                axios({
                    method: 'POST',
                    url: url,
                    // url: 'http://124.70.36.92:19132/polls/login/',
                    dataType: 'json',
                    data: thumbsUp,
                }).then(res => {
                    if (res.data.msg === '非法访问') {
                        alert(res.data.msg);
                        // window.location.href = "login.html";
                    } else {
                        console.log(res.data);
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            thumbs_down(e) {
                console.log(e);
                let movie_id = e.id;
                console.log(this.userName);
                console.log(this.userToken);
                var thumbsDown = new FormData()
                thumbsDown.append('username', this.userName);
                thumbsDown.append('token', this.userToken);
                thumbsDown.append('movie_id', e.id);

                var host = 'http://124.70.36.92:19132/';
                var url = host + 'authorities/unfavor/'

                axios({
                    method: 'POST',
                    url: url,
                    // url: 'http://124.70.36.92:19132/polls/login/',
                    dataType: 'json',
                    data: thumbsDown,
                }).then(res => {
                    if (res.data.msg === '非法访问') {
                        alert(res.data.msg);
                        // window.location.href = "login.html";
                    } else {
                        console.log(res.data);
                    }
                }).catch(err => {
                    console.log(err)
                })
            },

        },
        //
        // created: function () {
        //     this.isLogin = 1;
        // },

        mounted: function () {
            console.log('mounted');
            window.localStorage
            let locals = localStorage.getItem('userdata');
            userData = JSON.parse(locals);
            this.userName = userData.username
            this.userToken = userData.token
            console.log('before:' + this.isLogin)
            if (this.userName.length > 0) {
                this.isLogin = 1;
                console.log('after:' + this.isLogin)
            }

            console.log(this.userName);
            console.log(this.userToken);

            var user_movie = new FormData()
            user_movie.append('username', this.userName);
            user_movie.append('token', this.userToken);

            var host = 'http://124.70.36.92:19132/';
            var url_movie = host + 'authorities/movielist/'
            var url_bkg_pic = host + 'authorities/bkgpicture/'
            var url_age_recm = host + 'authorities/agerecommend/'

            // console.log(url_bkg_pic);

            var bkg_pic = new FormData()
            bkg_pic.append('username', this.userName);
            bkg_pic.append('token', this.userToken);

            var age_recm = new FormData()
            age_recm.append('username', this.userName);
            age_recm.append('token', this.userToken);

            console.log("bkg_pic:" + bkg_pic);

            axios({
                method: 'POST',
                url: url_bkg_pic,
                // url: 'http://124.70.36.92:19132/polls/login/',
                dataType: 'json',
                data: bkg_pic,
            }).then(res => {
                // this.load_stat = 0;
                if (res.data.msg === '非法访问') {
                    window.location.href = "login.html";
                } else {
                    console.log("bkgpic:")
                    console.log(res.data.data[0].link);
                    this.bkgPic = res.data.data[0]
                    var obj = document.getElementById("title");
                    // obj.style.backgroundImage= url("http://pic.rofc.online/2021.07.20-21:25:57.jpg");
                    titlepicture = this.bkgPic.link
                    $("#title").css("background-image", "url(" + titlepicture + ")");
                    this.titleName = this.bkgPic.name;
                }
            }).catch(err => {
                // this.load_stat = 1;
                console.log(err)
            })

            // this.load_stat = 1;
            console.log("获取大图完毕")

            // setTimeout(function () {
            //     alert("Hello");
            // }, 3000);

            console.log("睡眠完毕")
            // this.load_stat = 0;

            axios({
                method: 'POST',
                url: url_age_recm,
                // url: 'http://124.70.36.92:19132/polls/login/',
                dataType: 'json',
                data: age_recm,
            }).then(res => {
                if (res.data.msg === '非法访问') {
                    window.location.href = "login.html";
                } else if (res.data.msg === '不符合') {
                    console.log("从年代获得到了数据，让stat=0")
                    // this.load_stat = 0;
                    console.log("没有匹配的年代的电影")
                    this.age_recm_exist = 0;
                } else {
                    console.log("从年代获得到了数据，让stat=0")
                    // this.load_stat = 0;
                    console.log("有匹配的年代的电影")
                    console.log("age_recm:")
                    console.log(res.data.data)
                    this.movie_age = res.data.data;
                    this.age_recm_exist = 1;
                }
            }).catch(err => {
                // this.load_stat = 1;
                // setTimeout(function () {
                //     window.location.href = "recommend_old.html";
                // }, 5000);
                console.log(err)
            })

            var wait_time = 10000;

            axios({
                method: 'POST',
                url: url_movie,
                // url: 'http://124.70.36.92:19132/polls/login/',
                dataType: 'json',
                data: user_movie,
            }).then(res => {
                if (res.data.msg === '非法访问') {
                    window.location.href = "login.html";
                } else {
                    console.log("从user_movie获得到了数据，让stat=0")
                    console.log(res.data.recommends);
                    this.movie_list = res.data.recommends.slice(1,);
                    this.forYou = res.data.recommends.slice(0, 1);
                    this.forYou_name = this.forYou[0].categoryName;
                    this.forYou = this.forYou[0].movies;
                    console.log('foryou:' + this.forYou);
                    console.log('ml:' + this.movie_list)
                    console.log('be:' + this.items)
                    this.load_stat = 0;
                }
            }).catch(err => {
                setTimeout(function () {
                    window.location.href = "recommend.html";
                    // wait_time = wait_time * 2
                }, wait_time);
                console.log(err)
            })


        },
        // 计算调用的
        computed: {
            total: function () {
                // this表示的是vue对象
                return this.price * this.buyNum
            },
            baoyou: function () {
                return this.buyNum >= 10 ? "包邮" : "不包邮"
            }

        },
        // 监听 数据的变化
        watch: {
            buyNum: function (newVlaue, oldVlue) {
                console.log(newVlaue + "----" + oldVlue)
                if (newVlaue > this.storage || newVlaue < 0) {
                    this.buyNum = oldVlue
                }
            }
        }

    })

</script>

</body>
</html>
